<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p>全选:<input type="checkbox" class="check-all"></p>
  <p>单选:<input type="checkbox" class="check-one">
    <input type="checkbox" class="check-one">
    <input type="checkbox" class="check-one">
    <input type="checkbox" class="check-one">
    <input type="checkbox" class="check-one">
    <input type="checkbox" class="check-one">
  </p>
</body>
<script>
  // 需求
  // 1. 全选功能  所有的单选跟随全选的状态
  // 2. 反选功能  所有的单选被选中  => 全选框也被选中

  var checkAll = document.getElementsByClassName("check-all")[0];
  var checkOneList = document.getElementsByClassName("check-one");


  // 1. 全选功能  点击全选  所有的单选跟随全选的状态
  checkAll.onclick = function () {
    // console.log(this);
    var status = this.checked;   //获取全选框的状态
    console.log(status);
    for (var i = 0; i < checkOneList.length; i++) {
      var checkOne = checkOneList[i];
      checkOne.checked = status;
    }
  }

  // 2. 反选功能  所有的单选被选中  => 全选框也被选中
  // 每次点击单选框 判断所有的单选 是否全都是选中状态

  for (let i = 0; i < checkOneList.length; i++) {  //循环绑定事件
    let checkOne = checkOneList[i];
    checkOne.onclick = function () {
      // 如何判断 所有的单选 是否全都是选中状态?

      // 3. 计数法
      // 每次点击  获取单选中为选中状态的 
      var checkedList = document.querySelectorAll(".check-one:checked");
      console.log(checkedList);

      // if(checkedList.length  == checkOneList.length){
      //     checkAll.checked = true;
      // }else{
      //     checkAll.checked = false;
      // }

      checkAll.checked = checkedList.length == checkOneList.length ? true : false;

    }
  }

</script>

</html>